@import '../../common/common';

.operating {
  font-family: 'Microsoft YaHei';
  color: #fff;
  height: 100%;
  overflow: scroll;
  position: relative;
  .bg-box {
    position: absolute;
    height: px2rem(450);
    width: 100%;
    @include bis('../../../imgs/wallet-bg.jpg');
  }
  .main {
    position: relative;
    margin-top: px2rem(109);
    /* 余额 */
    .balance-warp {
      .icon-box {
        text-align: right;
      }
      @include fj();
      div.item {
        @include flex();
        display: inline-block;
        height: px2rem(100);
        &.balance {
          padding-left: px2rem(30);
          p {
            @include hl(px2rem(50));
            font-weight: 700;
            font-size: px2rem(28);
            &.number {
              color: #e1ff4a;
              font-size: px2rem(38);
            }
          }
        }
        &.withdraw {
          @include fj(left);
          align-items: center;
          a {
            display: inline-block;
            height: px2rem(64);
            padding: px2rem(15) px2rem(50) px2rem(19);
            background-color: #d7f2fe;
            color: #3b83ff;
            font-weight: 700;
            @include borderRadius(px2rem(32));
            line-height: normal;
          }
        }
      }
    }
    /* 今日收入 */
    .today-income {
      .title {
        font-size: px2rem(24);
        font-weight: 400;
      }
      .cash {
        height: px2rem(44);
      }
      text-align: center;
      font-size: px2rem(28);
      font-weight: 700;
      padding-top: px2rem(30);
    }
    /* 订单统计 */
    .order-count {
      margin: px2rem(55) px2rem(25) px2rem(0) px2rem(15);
      .dimension-time {
        color: #4d4d4d;
        background-color: #fff;
        @include borderRadius(px2rem(8));
        .tab-wrap {
          @include fj();
          .item {
            @include flex();
            text-align: center;
            @include hl(px2rem(90));
            margin: 0 px2rem(30);
            &.isActive {
              border-bottom: px2rem(4) solid #6fc8ff;
            }
          }
        }
        .content {
          padding: px2rem(47) px2rem(38) px2rem(38) px2rem(30);
          @include fj();
          background-color: #f7fbff;
          .label {
            @include flex(0 0 px2rem(142));
            p {
              @include hl(px2rem(95));
            }
          }
          .grid {
            background-color: #e5f1f8;
            @include flex(1);
            div.item {
              @include hl(px2rem(95));
              &.xy, &.hg {
                width: 100%;
                @include fj();
                align-items: center;
                div {
                  height: 60%;
                  text-align: right;
                  //padding-right: px2rem(20);
                  line-height: px2rem(57);
                  font-size: px2rem(20);
                  color: #fff;
                  font-weight: 700;
                }
              }
              &.xy {
                div {
                  background: linear-gradient(to right, #4475fc, #3eaffb);
                }
              }
              &.hg {
                div {
                  background: linear-gradient(to right, #f65e4c, #f1a04a);
                }
              }
            }
          }
        }
      }
    }
    /* 折线图 */
    .line-box {
      margin: px2rem(35) px2rem(25) px2rem(0) px2rem(15);
      @include borderRadius(px2rem(8));
      .date-filter {
        background-color: #fff;
        color: #4a4a4a;
        @include fj();
        padding: px2rem(30) px2rem(30) px2rem(30);
        .item {
          @include flex();
          @include fj();
          .label {
            @include flex(0 0 px2rem(50));
            line-height: px2rem(64);
          }
          .input {
            @include flex();
            padding: px2rem(16) px2rem(20);
            font-size: px2rem(24);
            line-height: px2rem(24);
            margin: 0 px2rem(30);
            width: px2rem(200);
            border: px2rem(2) solid #cbcbcb;
            @include borderRadius(px2rem(8));
            i {
              vertical-align: top;
            }
            span {
              @include hl(px2rem(24));
            }
          }
          +.item {
            margin-left: px2rem(30);
          }
        }
      }
      .line-warp {
        width: 100%;
        height: px2rem(300);
        background-color: #f6fbff;
        .title {
          padding: px2rem(20) px2rem(20) 0;
          font-size: px2rem(26);
        }
        .legend {
          color: #9a9a97;
          @include fj();
          div.item {
            @include flex();
            @include hl(px2rem(60));
            padding-left: px2rem(40);
          }
        }
        .line {
          @include wh(100%, 100%);
        }
      }
    }
  }
}
